React Native の FlatList で、連続要素の中に一部独立して表示させたいのでやってみた

#React Native

hiro

2022.07.07

この記事は公開されてから1年以上経過しています。情報が古い可能性がありますので、ご注意ください。

こんにちは、こんばんわ。CX事業本部 Delivery部 MADグループ@札幌の hiro です。

今月入社してばかりですが、モバイルのネイティブアプリケーションを作っていた頃の情報を、弊社創立記念日ということもあり上げさせていただこうかなと思います。今期の代表メッセージもご覧ください。

※創立記念日に、社内のみんなでブログを上げることを自社ではやっています！リンクは去年のものです！今年もお楽しみに！

はじめに

React Nativeを題材にさせていただきます。 React Nativeで要素などを連続表示を行う際に、「map」や「FlatList」などを用いて表示させるケースが多いと思います。そんな時に、連続要素の中に一部独立して表示させたい場合に、いい感じに表示させる方法を学んだので、少しご紹介させていただければなと思います。

内容

問題

まず、「連続要素の中に一部独立して表示させたい場合」とは、どういう状況なのかをご覧いただきます。

上記画像のように、連続する要素に属しつつ、一つだけ独立させたいケースです。（（例）「item」のTextを連続表示させつつ、「FlatList HEADER」のTextを独立させるケース）

以下のように、FlatListタグの上下に要素を置いてしまうと、上記画像のように、外に吐き出されてしまいます。（もちろんオラオラで押せば、なんだってできると思いますが）

※以下例では、itemsの情報を省略しています。

import React from 'react';
import { FlatList, Text, StyleSheet, View } from 'react-native';

const items = [
  {
    id: 1,
    title: 'Item 1',
  }, {
    id: 2,
    title: 'Item 2',
  }, {
    id: 3,
    title: 'Item 3',
  },
];

const App = () => {
  return (
    <View>
      <Text style={styles.stickyText}>STICKY HEADER</Text>
      <FlatList
        data={items}
        keyExtractor={item.id}
        renderItem={(item) => <Text>{item.title}</Text>}
      />
      <Text style={styles.stickyText}>STICKY FOOTER</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  stickyText: {
    backgroundColor: "yellow",
    padding: 8
  }
});

export default App;

解決

そこで、以下画像のように、「item」のTextを連続表示させつつ、「FlatList HEADER」のTextを独立させたい場合には、

以下のように、FlatListのPropsに「ListHeaderComponent」や「ListFooterComponent」を指定してあげると、上記画像のように、「FlatList HEADER」のTextを独立させることができます。

※以下例では、itemsの情報を省略しています。

import React from 'react';
import { FlatList, Text, StyleSheet, View } from 'react-native';

const items = [
  {
    id: 1,
    title: 'Item 1',
  }, {
    id: 2,
    title: 'Item 2',
  }, {
    id: 3,
    title: 'Item 3',
  },
];

const App = () => {
  const header = () => (
    <Text>FlatList HEADER</Text>
  );
  const footer = () => (
    <Text>FlatList FOOTER</Text>
  );

  return (
    <View>
      <Text style={styles.stickyText}>STICKY HEADER</Text>
      <FlatList
        data={items}
        keyExtractor={item.id}
        renderItem={(item) => <Text>{item.title}</Text>}
        ListHeaderComponent={header}
        ListFooterComponent={footer}
      />
      <Text style={styles.stickyText}>STICKY FOOTER</Text>
    </View>
  );
};

const styles = StyleSheet.create({
  stickyText: {
    backgroundColor: "yellow",
    padding: 8
  }
});

export default App;